<script setup lang="ts">
const props = withDefaults(defineProps<{
  breakpoints?: DynamicSlidesConfig;
  bg?: string;
  navigation?: { [key: string]: any }; // 允许其他未定义的属性 ;
}>(), {
  breakpoints: () => {
    return {
      340: {
        slidesPerView: 2.25,
        slidesPerGroup: 2,
      },
      375: {
        slidesPerView: 3.25,
        slidesPerGroup: 3,
      },
      768: {
        slidesPerView: 4.25,
        slidesPerGroup: 4,
      },
      900: {
        slidesPerView: 5.25,
        slidesPerGroup: 5,
      },

      1380: {
        slidesPerView: 6.25,
        slidesPerGroup: 6,
      },
      1430: {
        slidesPerView: 7.25,
        slidesPerGroup: 7,
      },
      1600: {
        slidesPerView: 8.25,
        slidesPerGroup: 8,
      },
    };
  },
  bg: 'rgba(29, 30, 36, 0.89)',
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
});

interface Grid {
  rows?: number;
  fill: string;
}

interface SlidesConfig {
  slidesPerView?: number;
  grid?: Grid;
}

interface DynamicSlidesConfig {
  [key: number]: SlidesConfig;
}

const _breakpoints = computed(() => {
  const _breakpoints = props.breakpoints;
  // if (eleBp.value.lt7xl) {
  //   console.log('eleBp.value', eleBp.value);
  //   _breakpoints = {
  //     1024: {
  //       slidesPerView: 5.25,
  //     },
  //     1280: {
  //       slidesPerView: 6.25,
  //     },
  //     1440: {
  //       slidesPerView: 5.25,
  //     },
  //   };
  // }
  return _breakpoints;
});
</script>

<template>
  <swiper-container
    :navigation="props.navigation"
    class="swiper_game swiper-cover__game-container"
    :freeMode="true"
    :freeModeSticky="true"
    reeModeMomentumRatio="0.3"
    :grabCursor="true"
    :breakpoints="_breakpoints"
    :passiveListeners="true"
    :preventClicks="true"
  >
    <slot />
  </swiper-container>
</template>

<style scoped lang="scss">
.swiper_game {
  --gradient_bg: v-bind('props.bg');
  position: relative;
  &:after {
    content: '';
    width: 60px;
    height: 100%;
    background: linear-gradient(90deg, var(--gradient_bg), transparent 50%);
    position: absolute;
    top: 0;
    left: -10px;
    z-index: 10;
    pointer-events: none;
  }
  &:before {
    content: '';
    width: 30px;
    height: 100%;
    background: linear-gradient(90deg, #0d131c00 2%, var(--gradient_bg));
    position: absolute;
    top: 0;
    right: -1px;
    z-index: 10;
    pointer-events: none;
  }
  .swiper-grid-column .swiper-wrapper {
    flex-direction: row;
  }
}
</style>

<style lang="scss">
.swiper_game.swiper-cover__game-container {
  // slide间距
  swiper-slide {
    --uno: 'p-4 !pl-0 lt-mobile:(p-2.5 px-2)';
  }
}
</style>
